import Config from '../utils/Config.js';

/**
 * 顶部状态栏组件
 * 显示目标数字、当前分数、道具按钮等
 */
export default class TopBar {
    constructor(uiManager) {
        this.uiManager = uiManager;
        this.layout = null;
        
        // 消除目标数字配置
        this.targetNumbers = [10, 20, 30, 40, 50];
        this.targetBoxes = [];
        
        // 加载目标数字背景图片
        this.targetBoxImage = null;
        this.loadTargetBoxImage();
        
        // 设置按钮配置
        this.settingButton = {
            image: null,
            x: 0,
            y: 0,
            width: 30,
            height: 30
        };
        
        // 加载设置按钮图片
        this.loadSettingImage();
    }

    /**
     * 设置布局
     */
    setLayout(layout) {
        this.layout = layout;
        this.calculateTargetBoxPositions();
        console.log('顶部状态栏布局设置:', layout);
    }

    /**
     * 加载目标数字背景图片
     */
    loadTargetBoxImage() {
        this.targetBoxImage = wx.createImage();
        this.targetBoxImage.onload = () => {
            console.log('目标数字背景图片加载完成');
        };
        this.targetBoxImage.onerror = () => {
            console.log('目标数字背景图片加载失败');
        };
        this.targetBoxImage.src = 'images/top2.png';
    }
    
    /**
     * 加载设置按钮图片
     */
    loadSettingImage() {
        this.settingButton.image = wx.createImage();
        this.settingButton.image.onload = () => {
            console.log('设置按钮图片加载完成');
        };
        this.settingButton.image.onerror = () => {
            console.log('设置按钮图片加载失败');
        };
        this.settingButton.image.src = 'images/setting.png';
    }
    /**
     * 计算目标数字框位置
     */
    calculateTargetBoxPositions() {
        if (!this.layout) return;
        
        // 使用正方形尺寸，避免图片拉伸变形
        const boxSize = 48; // 正方形边长（缩小尺寸）
        const boxSpacing = 12; // 数字框之间的间距（增加间距）
        const titleWidth = 170; // 标题文字区域宽度（适配缩小后的字体）
        const titleBoxSpacing = 12; // 标题和数字框之间的间距（更紧凑的布局）
        
        const boxesWidth = this.targetNumbers.length * boxSize + (this.targetNumbers.length - 1) * boxSpacing;
        const totalWidth = titleWidth + titleBoxSpacing + boxesWidth;
        
        // 增加上边距，使目标数字模块与顶部有更大间距
        const topMargin = 15;
        
        // 计算整体居中的起始X位置
        const startX = this.layout.x + (this.layout.width - totalWidth) / 2;
        const startY = this.layout.y + (this.layout.height - boxSize) / 2 + topMargin;
        
        // 保存标题位置信息
        this.titleX = startX;
        this.titleY = this.layout.y + this.layout.height / 2 + 8 + topMargin; // 垂直居中 + 上边距
        
        // 计算设置按钮位置（在TopBar内，左边距与备战区对齐）
        // 备战区左边距为60px，设置按钮X坐标与备战区左边距对齐
        this.settingButton.x = this.layout.x + 60;
        // 设置按钮在TopBar区域内垂直居中
        this.settingButton.y = this.layout.y + (this.layout.height - this.settingButton.height) / 2;
        
        // 计算数字框位置（在标题右侧）
        const boxesStartX = startX + titleWidth + titleBoxSpacing;
        
        this.targetBoxes = this.targetNumbers.map((number, index) => ({
            number: number,
            x: boxesStartX + index * (boxSize + boxSpacing),
            y: startY,
            width: boxSize,
            height: boxSize, // 高度等于宽度，保持正方形
            completed: false // 是否已完成消除
        }));
    }

    /**
     * 标记目标数字为已完成
     */
    markTargetCompleted(number) {
        const targetBox = this.targetBoxes.find(box => box.number === number);
        if (targetBox) {
            targetBox.completed = true;
            console.log(`目标数字 ${number} 已完成`);
        }
    }

    /**
     * 重置所有目标数字状态
     */
    resetTargets() {
        this.targetBoxes.forEach(box => {
            box.completed = false;
        });
    }

    /**
     * 检查是否所有目标都已完成
     */
    areAllTargetsCompleted() {
        return this.targetBoxes.every(box => box.completed);
    }

    /**
     * 渲染组件
     */
    render(ctx) {
        if (!this.layout) return;
        
        // 绘制内容区域的遮罩（只覆盖文字和图片区域）
        this.drawContentMask(ctx);
        
        // 绘制设置按钮（在遮罩之上）
        this.drawSettingButton(ctx);
        
        // 绘制消除目标数字标题
        this.drawTitle(ctx);
        
        // 绘制目标数字框
        this.drawTargetBoxes(ctx);
    }

    /**
     * 绘制内容区域遮罩
     */
    drawContentMask(ctx) {
        if (!this.titleX || !this.titleY || !this.targetBoxes || this.targetBoxes.length === 0) return;
        
        // 计算内容区域的边界（与calculateTargetBoxPositions保持一致）
        const titleWidth = 170; // 标题文字区域宽度（适配缩小后的字体）
        const titleBoxSpacing = 12; // 标题和数字框之间的间距（更紧凑的布局）
        const lastBox = this.targetBoxes[this.targetBoxes.length - 1];
        
        // 使用与数字框相同的Y坐标计算逻辑，确保遮罩层与内容对齐
        const topMargin = 15; // 与calculateTargetBoxPositions保持一致
        const boxSize = 48; // 与calculateTargetBoxPositions保持一致
        const contentStartY = this.layout.y + (this.layout.height - boxSize) / 2 + topMargin;
        
        // 遮罩区域：从标题开始到最后一个数字框结束
        const maskX = this.titleX - 10; // 左边留一点边距
        const maskY = contentStartY - 10; // 从数字框顶部往上10px
        const maskWidth = (lastBox.x + lastBox.width) - this.titleX + 20; // 右边留一点边距
        const maskHeight = boxSize + 20; // 数字框高度 + 上下边距
        
        // 绘制半透明遮罩
        ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
        ctx.fillRect(maskX, maskY, maskWidth, maskHeight);
        
        // 绘制遮罩边框
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
        ctx.lineWidth = 1;
        ctx.strokeRect(maskX, maskY, maskWidth, maskHeight);
    }

    /**
     * 绘制消除目标数字标题
     */
    drawTitle(ctx) {
        if (!this.titleX || !this.titleY) return;
        
        ctx.fillStyle = '#FFFFFF';
        ctx.font = 'bold 20px Arial'; // 减小字体从24px到20px
        ctx.textAlign = 'left';
        ctx.fillText('消除目标数字', this.titleX, this.titleY);
    }

    /**
     * 绘制目标数字框
     */
    drawTargetBoxes(ctx) {
        if (!this.targetBoxes || this.targetBoxes.length === 0) return;
        
        this.targetBoxes.forEach(box => {
            // 绘制背景图片
            if (this.targetBoxImage && this.targetBoxImage.complete) {
                ctx.drawImage(
                    this.targetBoxImage,
                    box.x,
                    box.y,
                    box.width,
                    box.height
                );
                
                // 根据completed状态叠加颜色遮罩
                if (!box.completed) {
                    // 未完成：叠加灰色遮罩
                    ctx.fillStyle = 'rgba(128, 128, 128, 0.65)';
                    ctx.fillRect(box.x, box.y, box.width, box.height);
                }
                // 已完成：保持原图黄色，不叠加遮罩
            } else {
                // 如果图片未加载，绘制备用背景
                // 未完成：灰色，已完成：黄色
                ctx.fillStyle = box.completed ? '#FFD700' : '#808080';
                ctx.fillRect(box.x, box.y, box.width, box.height);
                
                // 绘制边框
                ctx.strokeStyle = '#FFFFFF';
                ctx.lineWidth = 2;
                ctx.strokeRect(box.x, box.y, box.width, box.height);
            }
            
            // 绘制数字文字
            ctx.fillStyle = box.completed ? '#FFFFFF' : '#000000';
            ctx.font = 'bold 14px Arial'; // 适配更小的数字框（从16px到14px）
            ctx.textAlign = 'center';
            ctx.fillText(
                box.number.toString(),
                box.x + box.width / 2,
                box.y + box.height / 2 + 6
            );
            
            // 如果已完成，绘制勾选标记
            if (box.completed) {
                ctx.fillStyle = '#FFFFFF';
                ctx.font = 'bold 14px Arial';
                ctx.fillText('✓', box.x + box.width - 12, box.y + 16);
            }
        });
    }

    /**
     * 绘制分数区域
     */
    drawScoreArea(ctx, x, y, width, height) {
        // 当前分数
        ctx.fillStyle = '#FFFFFF';
        ctx.font = 'bold 14px Arial';
        ctx.textAlign = 'left';
        ctx.fillText('分数', x + 10, y + 20);
        
        ctx.font = 'bold 20px Arial';
        ctx.fillText(this.currentScore.toString(), x + 10, y + 45);
        
        // 等级
        ctx.font = 'bold 14px Arial';
        ctx.fillText(`等级 ${this.currentLevel}`, x + width - 80, y + 20);
    }

    /**
     * 绘制道具区域
     */
    drawPropsArea(ctx, x, y, width, height) {
        const propWidth = 80;
        const propSpacing = 10;
        
        this.props.forEach((prop, index) => {
            const propX = x + index * (propWidth + propSpacing);
            
            // 道具背景
            ctx.fillStyle = Config.COLORS.PRIMARY;
            ctx.fillRect(propX, y, propWidth, height);
            
            // 道具图标区域（这里用文字代替）
            ctx.fillStyle = '#FFFFFF';
            ctx.font = 'bold 12px Arial';
            ctx.textAlign = 'center';
            ctx.fillText(prop.icon, propX + propWidth/2, y + 25);
            
            // 道具数量
            ctx.fillStyle = Config.COLORS.SECONDARY;
            ctx.fillRect(propX + propWidth - 20, y, 20, 20);
            
            ctx.fillStyle = '#FFFFFF';
            ctx.font = 'bold 10px Arial';
            ctx.fillText(prop.count.toString(), propX + propWidth - 10, y + 15);
        });
    }
    
    /**
     * 绘制设置按钮
     */
    drawSettingButton(ctx) {
        if (!this.settingButton.image || !this.settingButton.image.complete) {
            // 备用绘制：简单的齿轮图标
            ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
            ctx.fillRect(this.settingButton.x, this.settingButton.y, this.settingButton.width, this.settingButton.height);
            
            ctx.fillStyle = '#333333';
            ctx.font = '20px Arial';
            ctx.textAlign = 'center';
            ctx.fillText('⚙', this.settingButton.x + this.settingButton.width/2, this.settingButton.y + this.settingButton.height/2 + 6);
        } else {
            // 绘制设置按钮图片（使用原图尺寸，不压缩）
            const imgWidth = this.settingButton.image.width;
            const imgHeight = this.settingButton.image.height;
            
            ctx.drawImage(
                this.settingButton.image,
                this.settingButton.x,
                this.settingButton.y,
                imgWidth,
                imgHeight
            );
        }
    }

    /**
     * 检查点是否在组件内
     */
    isPointInside(x, y) {
        if (!this.layout) {
            console.log(`[TopBar] isPointInside: 布局未设置`);
            return false;
        }

        const inside = x >= this.layout.x &&
                      x <= this.layout.x + this.layout.width &&
                      y >= this.layout.y &&
                      y <= this.layout.y + this.layout.height;

        console.log(`[TopBar] isPointInside: 点击(${x.toFixed(2)}, ${y.toFixed(2)}) 在区域[${this.layout.x}, ${this.layout.x + this.layout.width}] x [${this.layout.y}, ${this.layout.y + this.layout.height}] 内? ${inside}`);

        return inside;
    }

    /**
     * 处理触摸开始事件
     */
    onTouchStart(x, y) {
        console.log(`[TopBar] onTouchStart: 接收到点击(${x.toFixed(2)}, ${y.toFixed(2)})`);

        // 检查是否点击了设置按钮
        let buttonWidth = this.settingButton.width;
        let buttonHeight = this.settingButton.height;
        
        // 如果图片已加载，使用原图尺寸
        if (this.settingButton.image && this.settingButton.image.complete) {
            buttonWidth = this.settingButton.image.width;
            buttonHeight = this.settingButton.image.height;
        }
        
        if (x >= this.settingButton.x && x <= this.settingButton.x + buttonWidth &&
            y >= this.settingButton.y && y <= this.settingButton.y + buttonHeight) {
            console.log('点击设置按钮');
            this.onSettingButtonClick();
            return true;
        }
        
        return false;
    }
    
    /**
     * 设置按钮点击处理
     */
    onSettingButtonClick() {
        // 这里可以触发设置界面显示或其他设置相关操作
        console.log('打开设置界面');
        // TODO: 实现设置界面逻辑
        wx.showToast({
            title: '设置功能开发中',
            icon: 'none',
            duration: 1500
        });
    }
}
